import React, { useEffect, useState } from "react";
import { Link, useNavigate, useLocation } from "react-router-dom";
import { AntOutline, UserOutline, MailOutline } from "antd-mobile-icons";
import { getCurrentUserInfo } from "@/utils/authority";
import "./index.less";
const tabbarArr1 = [
  {
    noImg: "/images/home/home_no.png",
    isImg: "/images/home/home_is.png",
    text: "首页",
    path: "/",
  },
  {
    noImg: "/images/home/message_no.png",
    isImg: "/images/home/message_is.png",
    text: "消息",
    path: "./messege",
  },
  {
    noImg: "/images/home/message_no.png",
    isImg: "/images/home/message_is.png",
    text: '物联',
    path: "./equipment"
  },
  {
    noImg: "/images/home/my_no.png",
    isImg: "/images/home/my_is.png",
    text: "我的",
    path: "./user",
  },
];
const tabbarArr2 = [
  {
    noImg: "/images/home/home_no.png",
    isImg: "/images/home/home_is.png",
    text: "首页",
    path: "/",
  },
  {
    noImg: "/images/home/my_no.png",
    isImg: "/images/home/my_is.png",
    text: "我的",
    path: "./user",
  },
];

const Index: React.FC = (props) => {
  const [hidden, setHidden] = useState(false);
  const [userType, setUserType] = useState(""); //1居民 2服务公司
  const [tabbarArr, setTabbarArr] = useState([]);
  const [index, setIndex] = useState(0);
  const [userId, setUserId] = useState("");
  const navigate = useNavigate();
  const location = useLocation();
  useEffect(() => {
    setTimeout(() => {
      setUserId(getCurrentUserInfo()?.data?.userTypeName);
    }, 1);
    if (userId === "用户平台") {
      setUserType("1");
    } else {
      setUserType("2");
    }
  }, [userId]);
  useEffect(() => {
    console.log(location?.pathname);

    if (location?.pathname == "/") {
      navigate("/");
      setTabbarArr(userType == "1" ? tabbarArr1 : tabbarArr2);
    } else if (location?.pathname == "/user") {
      navigate(`/user`);
      setTabbarArr(userType == "1" ? tabbarArr1 : tabbarArr2);
      setIndex(userType == "1" ? 3 : 1);
    } else if (location?.pathname == "/messege") {
      navigate(`/messege`);
      setTabbarArr(tabbarArr1);
      setIndex(1);
    } else if (location?.pathname == "/equipment") {
      navigate(`/equipment`);
      setTabbarArr(tabbarArr1);
      setIndex(2);
    }
  }, [userType, index]);

  const itemChange = (key: number) => {
    setIndex(key);
  };

  return (
    <div className="tabbar">
      <div className="tabbar-content">
        {tabbarArr.map((item, key) => {
          return (
            <Link
              to={item.path}
              className={"tarbar-item " + (index === key ? "active" : "")}
              key={key}
              onClick={() => itemChange(key)}
            >
              <img
                className="btnImg"
                src={index === key ? item.isImg : item.noImg}
              ></img>
              <p>{item.text}</p>
            </Link>
          );
        })}
      </div>
    </div>
  );
};

export default Index;
